Tokidoki.it

Introduction #

Set the scene here. What problem were you solving, and why did it matter? A short paragraph that gives the reader enough context to care about what comes next.

This is a second paragraph. Notice how the prose stays readable at any viewport width — the max-width on the prose column keeps line lengths comfortable on large screens while the layout adapts on smaller ones.

Research #

Describe the discovery phase: user interviews, competitive analysis, constraints, and any surprising findings that shaped the direction.

“We kept hearing the same frustration — users couldn’t tell where they were in the process.” — recurring feedback from interviews

Below is a gallery from the research sprint. Click any image to view it full-screen.

A few written takeaways from the sessions:

• Pain point A was consistently mentioned across all age groups
• Existing tools optimised for power users, leaving newcomers behind
• Mobile usage was higher than the client expected — 68% of sessions

Execution #

Walk through the making: key decisions, iterations, tools used, and how the team collaborated.

We iterated through three rounds of prototypes. The first round validated the information architecture; the second focused on micro-interactions; the third was a near-pixel-perfect handoff.

Here’s how the final component structure looked in code:

function buildSection(id, content) {
  const el = document.createElement("section");
  el.id = id;
  el.innerHTML = content;
  return el;
}

Challenges #

Be honest about what was hard. What broke? What had to be scrapped?

The biggest unexpected challenge was performance on mid-range Android devices. The initial animation approach caused jank on anything below a Snapdragon 7xx. We rewrote the transition layer using CSS-only transforms and dropped frame time from ~28ms to ~6ms.

A secondary issue: the client changed the primary colour three weeks before launch, which cascaded into the design system. We’d built with CSS custom properties from the start, so the actual code change was two lines — but the QA pass took two days.

Outcome #

Results, metrics, or reflections. What shipped, and what would you do differently?

The product launched on schedule. Key metrics at 30 days post-launch:

• +34% task completion rate vs. the previous version
• −22% support tickets related to navigation
• 4.6 / 5 average rating in the first 500 app store reviews

If I were starting again I’d involve the engineering team earlier in the design process — several of our component decisions had to be revisited once they hit real constraints in the codebase.